<template>
    <div class="login">
        <div class="icon">
            <i class="el-icon-s-comment"></i>
        </div>
       <div class="title">
           登录【风珝聊天】在线聊天系统
       </div>
       <div class="form">
           <el-form ref="form" :model="form" label-width="80px" :rules="rules">
               <el-form-item label="账号" prop="email">
                    <el-input v-model="form.email" placeholder="请输入您的邮箱"></el-input>
               </el-form-item>
               <el-form-item label="密码" prop="pwd">
                    <el-input show-password v-model="form.pwd" placeholder="请输入您的密码"></el-input>
               </el-form-item>
               <el-form-item label="验证码" prop="code">
                    <div class="code">
                        <el-input v-model="form.code" placeholder="验证码"></el-input>
                        <img :src="codeImg.img" alt="加载中.." @click.stop="loadVerifyCode" />
                    </div>
               </el-form-item>
           </el-form>
       </div>
       <div class="handle">
               <div class="remember">
                   <el-checkbox v-model="isRemember">5天内免登陆</el-checkbox>
               </div>
               <div class="forget" @click.stop="$router.push({name: 'ResetPwd'})">忘记密码?</div>
           </div>
           <div class="btn" @click="onLogin">立即登录</div>
           <div class="reg">
               还没有账号?<a href="javascript:;" @click="$router.push({name: 'Register'})">注册账号</a>
           </div>
    </div>
</template>
<script lang="ts">
import {Vue,Component} from 'vue-property-decorator'
import axios from 'axios'

@Component
export default class Login extends Vue {

     $message: any
     $notify: any

    // 表单数据
    public form:any = {
        email: '',
        pwd: '',
        code: ''
    }

    // 图像验证码base646地址
    public codeImg = {
        key: '',
        img:''
    }

    // 数据验证规则
    public rules:any = {
        email:[
            { required: true, trigger: 'change', validator: this.validateEmail }
        ],
        pwd:[
            { required: true, trigger: 'change', validator: this.validatePwd }
        ],
        code:[
            { required: true, trigger: 'change', min: 5, max: 5, message: '长度应为5个字符' }
        ]
    }

    // 是否记住账号密码
    public isRemember:boolean = false

    beforeMount(){
        const email = this.$route.query.email
        if(email != null){
            this.form.email = email
        }
        this.loadVerifyCode()
    }

    // 校验邮箱
    private validateEmail(rule:any, value:string, cb:Function){
        if(value.match( /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/g) == null){
            cb(new Error('邮箱格式不正确'))
            return
        }
        cb()
    }

    // 校验密码
    private validatePwd(rule:any, value:string, cb:Function){
        if(value.match(/^\w{6,16}$/g) == null){
            cb(new Error('密码应为6~16位的字母、数字、下划线组成'))
            return
        }
        cb()
    }

    // 加载验证码
    public loadVerifyCode(){
        axios.get('/api/v1/user/code')
        .then(res=>{
            if(res.data.code===200){
                this.codeImg = res.data.data
            }else{
                this.$message.error(res.data.msg)
            }
        }).catch(err=>{
            this.$message.error("图形验证码获取失败!")
        })
    }

    // 用户登录
    onLogin(){
        const {email, pwd, code} = this.form
        if(email.match( /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/g) == null){
            this.$message.error("邮箱格式不正确")
            return
        }
        if(pwd.match(/^\w{6,16}$/) == null){
            this.$message.error("密码应为6~16位的字母、数字、下划线组成")
            return
        }
        let data = `email=${email}&pwd=${pwd}&key=${this.codeImg.key}&code=${code}`
        if(this.isRemember === true){
            data += '&remember=on'
        }
        axios.post('/api/v1/user/login', data)
            .then(res=>{
                if(res.data.code === 200){
                    // 登录成功
                    this.$notify.success('登录成功')
                    this.$router.push({name: 'Chat'})
                }else{
                    this.$notify.error(res.data.msg)
                    this.loadVerifyCode()
                }
            }).catch(err=>{
                this.$notify.error("登录失败:" + err)
                this.loadVerifyCode()
            })
    }
    
}
</script>
<style lang="less" scoped>
@import '../css/index.less';

.login{
    .float-win(#fdfdfd);
    .icon{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 60px;
        color: @theme-color;
    }
    .title{
        text-align: center;
        height: 60px;
        line-height: 60px;
        font-size: 20px;
        color: @theme-color;
    }
    .code{
        display: flex;
        img{
            width: 120px;
            height: 40px;
            display: inline-block;
            margin-left: 10px;
        }
    }
    .handle{
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        .forget{
            color: @theme-color;
            cursor: pointer;
        }
    }
    .btn{
            width: 100%;
            background-color: @theme-color;
            color: white;
            height: 40px;
            line-height: 40px;
            text-align: center;
            transition: all 0.5s;
            cursor: pointer;
            &:hover{
                background-color: white;
                color: @theme-color;
                border: 1px solid @theme-color;
            }
    }
    .reg{
        text-align: center;
        padding: 10px 0;
        font-size: 14px;
        color: #aaa;
        a{
            color: @theme-color;
            cursor: pointer;
        }
    }
}

</style>